<template>
  <div>
    <div
      :class="`card p-4 mb-5 has-background-${bgColor}-dark`"
    >
      <label
        class="label has-text-light"
        v-if="isEditPage"
      >
        编辑事项
      </label>
      <div class="field">
        <div class="control">
          <textarea
            class="textarea"
            :value="value"
            @input="handleInput"
            :placeholder="placeholder"
            maxlength="100"
          />
        </div>
      </div>

      <div class="field is-grouped is-grouped-right">
        <div class="control">
          <slot></slot>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
  export default {
    props: {
      value: {
        type: String
      },
      bgColor: {
        type: String,
        default: 'success'
      },
      isEditPage: {
        type: Boolean,
        default: false
      },
      placeholder: {
        type: String,
        default: '请输入事项...'
      }
    },

    data() {
      return {
        stop: ''
      }
    },

    methods: {
      handleInput(e) {
        const val = e.target.value
        // if (this.value.length >= 100) {
        //   if (this.stop !== '') {
        //     this.$emit('input', this.stop)
        //   } else {
        //     this.stop = val
        //   }
        //   console.log('输入的字数不能超过 100。')
        // } else {
        //   this.$emit('input', val)
        // }
        this.$emit('input', val)
      }
    },

    watch: {
      value(newValue) {
        if (newValue.length >= 100) {
          // 修复都一个字符的 bug
          this.$emit('input', newValue.slice(0, newValue.length - 1))
          alert('输入的字数不能超过 100。')
        }
      }
    }
  }
</script>

<style scoped>

</style>